<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
</html>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
		<div id="app">
			
			<h3>添加用户数据</h3>
			name:<input type="text" v-model="name"/><br>
			age:<input type="text" v-model.number="age"/><br>
			address:<input type="text" v-model="address" /><br>
			<button type="button" v-on:click="insertUser()">新增用户</button>
			
			
			<hr >
			
			<table border="1px" cellspacing="0px" cellpadding="0px" width="300px" align="center">
				<tr>
					<th>ID</th>
					<th>name</th>
					<th>age</th>
					<th>address</th>
					<th>操作</th>
				</tr>
				<tr v-for="item in userList">
					<td v-text="item.id"></td>
					<td v-text="item.name"></td>
					<td v-text="item.age"></td>
					<td v-text="item.address"></td>
					<td>
						<button type="button" v-on:click="deleteUserById(item.id)">删除</button>
					</td>
				</tr>
			</table>
		</div>
		
		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/axios.js" type="text/javascript" charset="utf-8"></script>
		
		<script type="text/javascript">
			const vue = new Vue({
				el: "#app",
				data: {
					userList: [],
					name: "",
					age: "",
					address: ""
					
					
				},
				methods: {
					//页面加载完成，自动调用这里的方法
					getUserList: function(){
						axios.get("http://localhost:8081/findAll")
						.then(resulut => {
							this.userList = resulut.data
						})
						.catch(function(error){
							console.log(error)
						})
					},
					//根据id删除用户
					deleteUserById:function(id){
						axios.delete("http://localhost:8081/user/"+id)
						.then(result => {console.log(result.data)})
					},
					
					//添加用户
					insertUser:function(){
						axios.post("http://localhost:8081/insertUser",{
							name: this.name,
							age: this.age,
							address: this.address
						}).then(result => {console.log(result.data)})
					}
				},
				mounted() {
					this.getUserList();
				}
			})
		</script>
	
	
	
	</body>
</html>
